import React, {Component, Fragment} from 'react';

require('./css/frame.css');

const Img0=(props)=>{
    return(
        <div id="imgbtn0">
            <div id="img0" onClick={props.nextImg} style={{cursor:'pointer'}}></div>
        </div>
    )
}
const Img1=(props)=>{
    return(
        <div id="imgbtn0">
            <div id="img0" ></div>
            <div id="img1_2"></div>
        </div>
    )
}
const Imgs=[Img0,Img1];
export default class P5 extends Component {
  constructor(...args) {
    super(...args);
    this.state = {
      t0: false,
        im:0,
    }
  }

  onClick() {
    this.setState({
      t0: true
    })
  }

  onOver(e) {
    this.setState({
      t0: true
    })
  }

  onOut() {
    this.setState({
      t0: false,
    })
  }
    nextImg(){
        let im=this.state.im+1;
        this.setState({
            im
        })
    }
  render() {
    const {t0 ,im} = this.state;
      const Img=Imgs[im];
    return (
      <div id="page">
        <div className="content" id="box5">
          <h4 className="title">地址发送</h4>

          <p className="par"><strong>请点击图片查看！</strong></p>
          <div className="bgimg" style={{top: '180px'}}>
              <Img  nextImg={this.nextImg.bind(this)}/>
          </div>
        </div>


        <img
          src={require("./img/info.png")}
          className="circle"
          style={{left: '100px', top: "400px"}}
          onClick={this.onClick.bind(this)}
          onMouseOver={this.onOver.bind(this)}
          onMouseOut={this.onOut.bind(this)}
        />


        {t0 && <div className="tips" style={{left: '37px', top: "330px"}} id="tip0">
          <span className="bot" style={{left: '60px'}}></span>
          <div className="tipcont" id="words">操作方式可参照步行导航功能</div>
        </div>}
      </div>
    );
  }
}


